<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <meta charset="UTF-8">
    <title>学习内容</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <link rel="stylesheet" th:href="@{/static/layuiadmin/layui/css/layui.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/admin.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/layuiadmin/style/template.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/content.css}" media="all">
    <link rel="stylesheet" th:href="@{/static/css/22.css}" media="all">
    <script th:src="@{/static/js/jquery-3.6.0.min.js}"></script>

    <link href="//netdna.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="//vjs.zencdn.net/7.10.2/video-js.min.css" rel="stylesheet">
    <script src="//vjs.zencdn.net/7.10.2/video.min.js"></script>

</head>
<header>
    <div>
        <ul class="layui-nav">
            <!-- 设定layui-this来指向当前页面,即绿色滑块移动到该分类下方 -->
            <li class="layui-nav-item">
                <a th:href="@{/index}">真会学</a>
            </li>
            <li class="layui-nav-item">
                <a href="javascript:" sec:authentication="name"><i class="layui-icon layui-icon-user" style="font-size: 20px;margin: 0px 10px;"></i>
                </a>
                <dl class="layui-nav-child">
                    <dd><a href="/user/my/front">个人信息</a></dd>
                    <dd><a th:href="@{/logout}">退了</a></dd>
                </dl>
            </li>
        </ul>
    </div>
</header>
<body>
<div th:if="${message}!=null">
    <h1 th:text="${message}"></h1>
</div>
<div th:if="${message}==null">
    <input type="hidden" name="menu_topic" id="menu_topic" th:value="${menu_topic}">
    <input type="hidden" name="book_name" id="book_name" th:value="${book_name}">
    <input type="hidden" name="duration" id="duration" th:value="${lookTime}">

    <div id="right_page" scrollshow="true" style="position: fixed;height: auto">
        <ul>
            <li><a th:href="@{/stu/bookDetail(book_name=${book_name})}" class=""><cite>返回</cite></a></li>
            <li><a href="#wrap" class=""><cite>视频</cite></a></li>
            <li><a href="#option" class=""><cite>单选题</cite></a></li>
            <li><a href="#multi-option" class=""><cite>多选题</cite></a></li>
            <li><a href="#fillIn" class=""><cite>填空题</cite></a></li>
            <li><a href="#code" class=""><cite>代码题</cite></a></li>
            <li><a href="#" class=""><cite>顶部</cite></a></li>
        </ul>
    </div>


    <div class="wrap" id="wrap">
        <h3>[[${menu_topic}]]</h3>
        <div class="content">
            <video
                    style="margin: 0 auto"
                    id="my-player"
                    class="video-js vjs-big-play-centered"
                    controls
                    preload="auto"
                    poster=""
                  >
                <source th:src="'/static'+${videoUrl}" type="video/mp4"></source>
                <source th:src="'/static'+${videoUrl}" type="rtmp/flv"></source>
                <p class="vjs-no-js">
                    To view this video please enable JavaScript, and consider upgrading to a
                    web browser that
                    <a href="https://videojs.com/html5-video-support/" target="_blank">
                        supports HTML5 video
                    </a>
                </p>
            </video>
        </div>
    </div>


    <!--选择题-->
    <div class="words" id="option">单选题</div>
    <div id="options">
        <form id="option-form" onsubmit="return false;">
            <ul th:each="subject,i:${list}" th:switch="${subject.getType()}"  th:case="1" class="option">
                <li th:text="'（ ' + ${i.index+1} + ' ）' +${subject.getStem()}" class="subject"></li><br>
                <li th:text="A. +' '+ ${subject.getOption_one()}" class="option"></li>
                <br>
                <li th:text="B. +' '+${subject.getOption_two()}" class="option"></li>
                <br>
                <li th:text="C. +' '+${subject.getOption_three()}"></li>
                <br>
                <li th:text="D. +' '+${subject.getOption_four()}" class="option"></li>
                <br>
                <li th:text="'知识点： '+${subject.getPoint()} +' &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; 难度系数：'+${subject.getFacility()}"
                    class="point-facility"></li>

                <select th:onchange="optionChange([[${subject.question_number}]])" th:id="${'option'+subject.question_number}"
                        th:class="${subject.getStudentAnswer() != null?'isShow':'option-select'}">
                    <option value="请选择正确答案">请选择正确答案</option>
                    <option value="A" th:name="${'name'+subject.getQuestion_number()}">A</option>
                    <option value="B" th:name="${'name'+subject.getQuestion_number()}">B</option>
                    <option value="C" th:name="${'name'+subject.getQuestion_number()}">C</option>
                    <option value="D" th:name="${'name'+subject.getQuestion_number()}">D</option>
                </select>
                <!--            学生答案正确-->
                <span th:if="${subject.getCheck()=='√'}" th:id="${'success'+subject.getQuestion_number()}" style="color: green" th:class="${subject.getStudentAnswer() == null?'isShow2':'success'}"
                      th:text="${subject.getStudentAnswer() != null? '你的答案为：'+subject.getStudentAnswer()+'  '+subject.getCheck():' '}"></span>
                <!--            学生答案错误-->
                <span th:if="${subject.getCheck()!='√'}" th:id="${'success'+subject.getQuestion_number()}" style="color: #ff4038" th:class="${subject.getStudentAnswer() == null?'isShow2':'success'}"
                      th:text="${subject.getStudentAnswer() != null? '你的答案为：'+subject.getStudentAnswer()+'  '+subject.getCheck():' '}"></span>
                <!--            提交的时候答案存放位置-->
                <input type="text" th:name="${'option'+subject.getQuestion_number()}" th:id="${'option_answer'+subject.getQuestion_number()}" hidden>
            </ul>
            <button  th:if="${alreadyOption}" class="tijiao-option layui-btn" id="option-btn" onclick="option()">提交</button><br/>
        </form>
    </div>

    <!--多选题-->
    <div class="multi-words" id="multi-option">多选题</div>
    <div id="multi-options">
        <!--    <form action="#" id="multi-answer">-->
        <ul th:each="subject,i:${list}" th:switch="${subject.getType()}"  th:case="2" class="option">
            <li th:text="'( ' + ${i.index+1} + ' )' +${subject.getStem()}" class="subject"></li><br>
            <li th:text="A. +' '+ ${subject.getOption_one()}" class="option"></li>
            <br>
            <li th:text="B. +' '+${subject.getOption_two()}" class="option"></li>
            <br>
            <li th:text="C. +' '+${subject.getOption_three()}" class="option"></li>
            <br>
            <li th:text="D. +' '+${subject.getOption_four()}" class="option"></li>
            <br>
            <li th:text="'知识点： '+${subject.getPoint()} +' &nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; 难度系数：'+${subject.getFacility()}"
                class="point-facility"></li>

            <div class="list">
                <form action="#" id="multi-answer">
                    <input type="text" class="multi-option" th:name="${'answer'+subject.getQuestion_number()}" th:id="${'answer'+subject.getQuestion_number()}" hidden>
                </form>
                <div class="title" th:onclick="myclick([[${subject.getQuestion_number()}]])" >
                    <!--            学生答案正确-->
                    <span th:if="${subject.getCheck()=='√'}" th:id="${'success'+subject.getQuestion_number()}" style="color: green;margin-top: 5px;" th:class="${subject.getStudentAnswer() == null?'isShow2':'success'}"
                          th:text="${subject.getStudentAnswer() != null? '你的答案为：'+subject.getStudentAnswer()+'  '+subject.getCheck():' '}"></span>
                    <!--            学生答案错误-->
                    <span th:if="${subject.getCheck()!='√'}" th:id="${'success'+subject.getQuestion_number()}" style="color: #ff4038;margin-top: 5px;" th:class="${subject.getStudentAnswer() == null?'isShow2':'success'}"
                          th:text="${subject.getStudentAnswer() != null? '你的答案为：'+subject.getStudentAnswer()+'  '+subject.getCheck():' '}"></span>
                    <span th:id="${'tip'+subject.getQuestion_number()}"
                          th:if="${subject.getStudentAnswer() == null}">请选择正确答案
                            <i class="fa fa-angle-down" style="font-size: 14px; font-weight: bolder;margin-right: 2px;"></i>
                        </span>
                </div>
                <div class="select" th:id="'select'+${subject.getQuestion_number()}">
                    <div><input type="checkbox" th:name="'multi-option'+${subject.getQuestion_number()}" value="A" />A</div>
                    <div><input type="checkbox" th:name="'multi-option'+${subject.getQuestion_number()}" value="B" />B</div>
                    <div><input type="checkbox" th:name="'multi-option'+${subject.getQuestion_number()}" value="C" />C</div>
                    <div><input type="checkbox" th:name="'multi-option'+${subject.getQuestion_number()}" value="D" />D</div>
                </div>

            </div>
        </ul>
        <button th:if="${alreadyMut}" type="submit" class="tijiao-multi layui-btn" onclick="multiOption()" id="multi-submit">提交</button><br/>
        <!--    </form>-->
    </div>

    <!--填空题-->
    <div class="fillIn" id="fillIn" >填空题</div>
    <div id="fillIns">
        <form action="#" id="fillIn-form">
            <div class="fillIn-item" th:each="subject,i:${list}" th:switch="${subject.getType()}"  th:case="3">
                <div class="fillIn-subject" th:text="${subject.getStem()}" th:id="${'fillIn-title'+subject.getQuestion_number()}"></div>
                <textarea class="fillIn-textarea" rows="6" cols="92" th:id="${'fillIn'+subject.getQuestion_number()}"
                          oncopy=" alert('禁止复制粘贴'); return false;" onpaste=" alert('禁止复制粘贴'); return false"
                          style="width: 100%;max-width:100%;min-width:100%;min-height: 5%;"
                          th:if="${subject.getStudentAnswer() == null    }"
                          th:name="${'fillIn'+subject.getQuestion_number()}"></textarea>
                <textarea class="fillIn-textarea" rows="6" cols="92" th:id="${'fillIn'+subject.getQuestion_number()}"
                          oncopy=" alert('禁止复制粘贴'); return false;" onpaste=" alert('禁止复制粘贴'); return false"
                          style="width: 100%;max-width:100%;min-width:100%;min-height: 5%;"
                          th:if="${subject.getStudentAnswer() != null }"
                          th:name="${'fillIn'+subject.getQuestion_number()}"
                          th:text="${subject.getStudentAnswer()}" disabled></textarea>
                <span th:if="${subject.getStudentAnswer()!=null  && subject.getScore()==null}" th:id="${'success'+subject.getQuestion_number()}"
                      style="color: red;">已经提交，等待批改</span>
                <span th:if="${subject.getStudentAnswer()!=null  && subject.getScore()!=null}" th:id="${'success'+subject.getQuestion_number()}"
                      style="color: green;">得分：[[${subject.getScore}]]</span>
            </div>
            <button th:if="${alreadyFil}" type="button"  class="tijiao-fillIn layui-btn" id="fillIn-submit" th:onclick="fillIn()">提交</button><br/>
        </form>
    </div>

    <!--代码题-->
    <div class="code" id="code" >代码题</div>
    <div id="codes">
        <form action="#" id="code-form">
            <div class="code-item" th:each="subject,i:${list}" th:switch="${subject.getType()}"  th:case="4">
                <div class="code-subject" th:text="${subject.getStem()}"></div>
                <textarea rows="16" cols="92"  oncopy=" alert('禁止复制');" th:id="${'code'+subject.getQuestion_number()}"
                          style="width: 100%;max-width:100%;min-width:100%;min-height: 5%;"
                          th:name="${'code'+subject.getQuestion_number()}"
                          th:if="${subject.getStudentAnswer() == null}"></textarea>
                <textarea rows="16" cols="92"  oncopy=" alert('禁止复制');"
                          style="width: 100%;max-width:100%;min-width:100%;min-height: 5%;"
                          th:if="${subject.getStudentAnswer() != null}"
                          th:text="${subject.getStudentAnswer()}" disabled></textarea>
                <span th:if="${subject.getStudentAnswer()!=null && subject.getScore()==null}" th:id="${'success'+subject.getQuestion_number()}"
                      style="color: red;">已经提交，等待批改</span>
                <span th:if="${subject.getStudentAnswer()!=null && subject.getScore()!=null}" th:id="${'success'+subject.getQuestion_number()}"
                      style="color: green;">得分：[[${subject.getScore}]]</span>
            </div>
            <button  th:if="${alreadyCode}" type="button" class="tijiao-code layui-btn" onclick="code()">提交</button><br/>
        </form>
    </div>

    <!--相关文件下载-->
    <div class="code" id="file" >相关文件下载</div>
    <div id="files">
        <!--    <div id="item" th:text="${fileUrl}"></div>-->
        <a th:href="'/static'+${fileUrl}" download
           style="padding: 20px;margin-top: 10px;color: forestgreen;">本章节课件下载</a>
    </div>
</div>
<!--<footer class="layui-trans layadmin-user-login-footer">-->
<!--    <a href="https://beian.miit.gov.cn/" target="_blank">-->
<!--        皖ICP备2022003330号-->
<!--    </a>-->
<!--</footer>-->
<script th:src="@{/static/layuiadmin/layui/layui.js}"></script>
<script th:src="@{/static/js/fireWork.js}"></script>
<script>window.HELP_IMPROVE_VIDEOJS = false;</script>
<script>
    layui.config({
        base: '/static/layuiadmin/' //静态资源所在路径
    }).extend({
        index: 'lib/index' //主入口模块
    }).use(['index']);
</script>
<!--点击事件-->
<script>

    var title = document.getElementById('title1');
    var select = document.getElementById("select1");

    function myclick(res) {
        console.log(res)
        // alert("click")
        user_options = ""
        var select = document.getElementById('select'+res)
        if (select.style.display == 'none'){
            select.style.display = 'block'
        }else {
            //获取当前多选的选项
            var multiOption = document.getElementsByName("multi-option"+res)
            //获取用户选择的选项组合成字符串
            for (i in multiOption){
                if ( multiOption[i].checked){
                    user_options += multiOption[i].value + ","
                }
            }
            //将用户选择的选项组合成的字符串赋值到input中
            document.getElementById("answer"+res).value = user_options

            select.style.display = 'none'

            //在前端响应用的选择
            if (user_options != ""){
                var tip = document.getElementById("tip"+res)
                tip.style.padding = "5px"
                //将结尾的最后一个“，”去掉
                tip.innerText = "你的选择为：" + user_options.substring(0,user_options.length-1)
            }
        }
    }

    // 单选题的赋值到input
    function optionChange(data){
        //获取点击的select的id
        var option = document.getElementById("option"+data)
        //获取选择的选项
        var answer = option.options[option.selectedIndex].value
        //将选择的选项赋值到input中
        document.getElementById("option_answer"+data).value = answer
    }
</script>

<!--视频播放-->
<script>
    let isRead = false;
    let curTime = 0;
    let recordTime = 0;
    var options = {
        // fluid:true,
        autoplay:true,
        playbackRates: [2.0, 1.5, 1.0, 0.5],//切换播放速率按钮
        suppressNotSupportedError: false,//官网解释：https://docs.videojs.com/tutorial-options.html
        controlBar: {
            fullscreenToggle: true,//显示全屏按钮，默认为true
            pictureInPictureToggle: true,//隐藏画中画按钮，默认为true
            volumePanel: false,//隐藏声音面板
            currentTimeDisplay: true,//显示当前播放时间
            timeDivider: true,//显示时间分割线
            durationDisplay: true,//显示总时间
            remainingTimeDisplay: false,//隐藏剩余时间，
        }
    };
    var player = videojs('my-player', options, function onPlayerReady() {
        videojs.log('Your player is ready!');
        // How about an event listener?
        this.play();
        this.on('loadedmetadata', function() {
            console.log('loadedmetadata-视频源数据加载完成')
            this.currentTime($("#duration").val());
        });
        this.on("seeking",function(){
            console.log("视频跳转中");
            curTime=this.currentTime();
            $.ajax({
                type: "get",
                url: "/content/getVideoTime",
                dataType: 'JSON',
                async: false,
                data: {
                    menu_topic: $("#menu_topic").val(),
                    book_name: $("#book_name").val(),
                },
                success(time) {
                    recordTime = time;
                    console.log("当前播放时间：",curTime)
                    console.log("记录播放时间：",recordTime)
                      if(curTime>recordTime){
                          isRead = false;
                            layer.msg("你还没有看过这部分内容")
                      }else isRead = true;
                }
            })
        })
        this.on("seeked",function(){
            console.log("视频跳转结束");
            if(!isRead){
                this.currentTime(recordTime);
            }
        })
        //播放时长(秒)
        var totalTime = 0;
        // 监听播放进度
        this.on('timeupdate', function() {
            //当前播放时长(秒)
            var currentTime = Math.floor(this.currentTime());

            if (currentTime > 0 && currentTime > totalTime && (currentTime % 5 == 0)) {
                //每隔5秒，向服务器提交播放时间(秒)
                $.ajax({
                    type: "get",
                    url: "/content/updateTime",
                    dataType: 'JSON',
                    async: false,
                    data:{
                        menu_topic:$("#menu_topic").val(),
                        book_name:$("#book_name").val(),
                        duration:currentTime,
                    },
                    success(Res){
                        if(Res.code==200){
                            console.log("上传成功")
                        }
                    }
                })
            }
            totalTime = currentTime;
            // console.log("time=",totalTime)
        });

        this.on('ended', function() {
            videojs.log('Awww...over so soon?!');
        });
    });
</script>

<!--交互数据-->
<script>
    var book_name = $('#book_name').val()
    var menu_topic = $('#menu_topic').val()

    //单选题
    function option() {
        //获取表单的值
        var arr = $('#option-form').serializeArray();

        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: "POST",
            url:"/content/option/"+book_name+"/"+menu_topic+"/1",
            dataType: 'JSON',
            async: false,
            // data: arr,
            data: JSON.stringify(arr),
            success: function (result) {
                if (result.code != 200){
                    console.log(result);
                    for (var i=0; i<result.code; i++){
                        var name = result.payload[i].name
                        //除去选项
                        document.getElementById(name).remove()
                        //获取显示标签
                        var success = name.replace(/option/,"success")
                        //设置显示标签的的style
                        document.getElementById(success).style.display = 'inline-block'
                        document.getElementById(success).style.float = 'right'
                        document.getElementById(success).style.marginTop = '-30px'
                        if(result.payload[i].judge == '√')
                            document.getElementById(success).style.color = 'green'
                        else
                            document.getElementById(success).style.color = 'red'
                        var show = "你的答案: " + arr[i].value +"   " + result.payload[i].judge
                        document.getElementById(success).innerText = show;
                    }
                    document.getElementById("option-btn").remove()

                }
            }
        })

    }


    //多选题
    function multiOption() {

        //获取input的值 name为answer的值
        var arrs = $(".multi-option[name^='answer']").serializeArray();

        console.log(arrs)
        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: "POST",
            url:"/content/option/"+book_name+"/"+menu_topic+"/2",
            dataType: 'JSON',
            async: false,
            data: JSON.stringify(arrs),
            success: function (result) {
                if (result.code != 200){
                    console.log(result);
                    for (var i=0; i<result.code; i++){
                        var name = result.payload[i].name
                        name = "tip"+name.substr(6,2)
                        //除去选项
                        document.getElementById(name).remove()
                        //获取显示标签
                        var success = name.replace(/tip/,"success")
                        //设置显示标签的的style
                        document.getElementById(success).style.display = 'inline-block'
                        document.getElementById(success).style.float = 'right'
                        document.getElementById(success).style.marginTop = '10px'
                        if(result.payload[i].judge == '√')
                            document.getElementById(success).style.color = 'green'
                        else
                            document.getElementById(success).style.color = 'red'
                        var show = "你的答案: " + arrs[i].value +"   " + result.payload[i].judge
                        document.getElementById(success).innerText = show;
                    }
                    document.getElementById("multi-submit").remove()

                }
                return false;
            }
        })
    }


    //填空题和代码题
    function fillIn() {
        //获取input的值 name为answer的值
        var arr = $('#fillIn-form').serializeArray();
        console.log(arr)

        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: "POST",
            url:"/content/fillIn/"+book_name+"/"+menu_topic+"/3",
            dataType: 'JSON',
            async: false,
            data: JSON.stringify(arr),
            success: function (result) {
                console.log(result)
                for (var i=0; i<result.code; i++){
                    var name = result.payload[i].name
                    var names = "fillIn"+name.substr(6,2)

                    //创建span
                    var span = document.createElement("span")
                    span.id = "success"+name.substr(6,2)
                    span.style.color = "red"
                    span.innerText = "已经提交，等待批改"


                    // textArea.append(div)
                    document.getElementById(names).after(span)
                    console.log("append")

                    //除去选项
                    document.getElementById(names).disabled = true

                }
                document.getElementById("fillIn-submit").remove()
            }
        })

    }

    //代码题
    function code() {
        //获取input的值 name为answer的值
        var arr = $('#code-form').serializeArray();
        console.log(arr)

        $.ajax({
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            type: "POST",
            url:"/content/fillIn/"+book_name+"/"+menu_topic+"/4",
            dataType: 'JSON',
            async: false,
            data: JSON.stringify(arr),
            success: function (result) {
                console.log(result)
                    for (var i=0; i<result.code; i++){
                        var name = result.payload[i].name
                        var names = "code"+name.substr(4,2)

                        //创建span
                        var span = document.createElement("span")
                        span.id = "success"+name.substr(4,2)
                        span.style.color = "red"
                        span.innerText = "已经提交，等待批改"


                        // textArea.append(div)
                        document.getElementById(names).after(span)
                        console.log("append")

                        //除去选项
                        document.getElementById(names).disabled = true

                    }
                    document.getElementById("code-submit").remove()
                }

        })

    }


</script>




</body>
</html>